<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello world</title>
    <script src="../libs/vue/2.6.11/vue.min.js"></script>
    <script src="../libs/vue/2.6.11/tween.js"></script>
</head>
<body>
<div id="example-8">
    <input v-model.number="firstNumber" type="number" step="20"> +
    <input v-model.number="secondNumber" type="number" step="20"> =
    {{ result }}
    <p>
        <animated-integer v-bind:value="firstNumber"></animated-integer> +
        <animated-integer v-bind:value="secondNumber"></animated-integer> =
        <animated-integer v-bind:value="result"></animated-integer>
    </p>
</div>
<script>
    Vue.component('animated-integer', {
        template: '<span>{{ tweeningValue }}</span>',
        props: {
            value: {
                type: Number,
                required: true
            }
        },
        data: function () {
            return {
                tweeningValue: 0
            }
        },
        watch: {
            value: function (newValue, oldValue) {
                this.tween(oldValue, newValue)
            }
        },
        mounted: function () {
            this.tween(0, this.value)
        },
        methods: {
            tween: function (startValue, endValue) {
                var vm = this
                function animate () {
                    if (TWEEN.update()) {
                        requestAnimationFrame(animate)
                    }
                }

                new TWEEN.Tween({ tweeningValue: startValue })
                    .to({ tweeningValue: endValue }, 500)
                    .onUpdate(function () {
                        vm.tweeningValue = this.tweeningValue.toFixed(0)
                    })
                    .start()

                animate()
            }
        }
    })
    // 所有的复杂度都已经从 Vue 的主实例中移除！
    new Vue({
        el: '#example-8',
        data: {
            firstNumber: 20,
            secondNumber: 40
        },
        computed: {
            result: function () {
                return this.firstNumber + this.secondNumber
            }
        }
    })
</script>
</body>
</html>